<script>
import ParticleEffect from './particle-effect'

export default {
  props: {
    text: {
      type: String,
      default: '',
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    animating: {
      type: Boolean,
      default: false,
    },
    buttonStyles: {
      type: Object,
      default: null,
    },
    buttonOptions: {
      type: Object,
      default: null,
    },
  },
  computed: {
    particleEffectProps() {
      const result = { hidden: this.hidden }

      Object.keys(this.buttonOptions).forEach(key => {
        if (key === 'hidden') return

        result[key] = this.buttonOptions[key]
      })

      return result
    },
    nativeButtonStyles() {
      const result = {
        background: '#121019',
        color: '#fff',
        padding: '1.5rem 3rem',
        border: '0',
        borderRadius: '5px',
        cursor: 'pointer',
        fontSize: '1.2em',
      }

      Object.keys(this.buttonStyles).forEach(key => {
        result[key] = this.buttonStyles[key]
      })

      return result
    },
  },
  methods: {
    onAnimationComplete() {
      this.$emit('update:animating', false)
    },
    onToggle() {
      if (this.animating) return

      this.$emit('update:hidden', !this.hidden)
      this.$emit('update:animating', true)
    },
  },
  render(createElement) {
    return createElement(
      ParticleEffect,
      {
        props: this.particleEffectProps,
        on: {
          complete: this.onAnimationComplete,
        },
      },
      [
        createElement(
          'button',
          {
            style: this.nativeButtonStyles,
            on: {
              click: this.onToggle,
            },
          },
          this.text
        ),
      ]
    )
  },
}
</script>
